<template>
  <div style="margin-top: 40px">
    <h3 style="letter-spacing: 1px;font-weight: 400;padding-bottom: 10px;margin-left: 300px">修改密码</h3>
    <div style="margin-left: 300px">
      <el-form style="width: 350px;float: left" label-position="top" ref="user" :model="user" label-width="80px" :rules="rules">
        <el-form-item style="padding: 0" label="原密码" prop="password">
          <el-input v-model="user.password" :disabled="flag"></el-input>
        </el-form-item>
        <el-form-item style="padding: 0" label="新密码" prop="newPassword">
          <el-input v-model="user.newPassword" :disabled="flag"></el-input>
        </el-form-item>
        <el-form-item style="padding: 0" label="确认密码" prop="confirmPassword">
          <el-input v-model="user.confirmPassword" :disabled="flag"></el-input>
        </el-form-item>

        <el-form-item style="padding-top: 10px;" v-if="flag">
          <el-button type="primary" @click="changeFlag">修改</el-button>
        </el-form-item>

        <el-form-item style="padding-top: 10px;" v-else>
          <el-button type="primary" @click="onSubmit">确认</el-button>
          <el-button type="primary" @click="reset">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import {changePassword, checkPassword} from "@/api/student";
import {getUserId  } from "@/utils/auth";
export default {
  name: "studentPassword",
  data() {
    return {
      id: getUserId(),
      flag: true,
      rules: {
        password: [
          { required: true,message: '原密码不可为空！', trigger: 'blur' },
          { validator: this.checkPassword, trigger: "blur" }
        ],
        newPassword: [
          { required: true,message: '新密码不可为空！', trigger: 'blur' },
          { pattern: /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/, message: "密码必须包含数字和字母且不少于8位", trigger: "blur" }
        ],
        confirmPassword: [
          { required: true,message: '确认密码不可为空！', trigger: 'blur' },
          { validator: this.validatePassword, trigger: "blur" }
        ],
      },
      user: {
        password: '',
        newPassword: '',
        confirmPassword: '',
      },
    }
  },

  mounted() {
  },

  created() {
  },

  methods: {

    changeFlag(){
      this.flag = !this.flag;
    },

    reset(){
      this.user = {};
      this.changeFlag();
    },


    onSubmit() {
      this.user.id = this.id;
      this.$refs.user.validate(valid => {
        if (valid) {
          this.loading = true;
          changePassword(this.user).then(res => {
            this.$message.success(res.message);
            this.reset();
          })
        }
      });
    },

    validatePassword(rule, value, callback) {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.user.newPassword) {
        callback(new Error('两次输入密码不一致'));
      } else {
        callback();
      }
    },

    checkPassword(rule, value, callback) {
      this.user.id = this.id
      // 检查密码
      checkPassword(this.user).then(res => {
        callback();
      }).catch(() => {
        callback(new Error('请输入正确的密码'));
      })
    },

  },

}

</script>

<style scoped>
>>> .el-form--label-top .el-form-item__label {
  padding: 0;
}

.el-form-item {
  margin-bottom: 5px;
}
</style>
